{% extends 'layout/main.html' %}
{% from 'macros/_macros.html' import form_field %}

{% block content_header %}
<div class="row page-titles">
  <div class="col-md-5 col-8 align-self-center">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">首页</a></li>
      <li class="breadcrumb-item active">修改文章: {{ form.title.data }}</li>
    </ol>
  </div>
</div>
{% endblock %}

{% block content %}



<form class="form-material" method="post" action="">
  <div class="row" style="flex-direction: row-reverse;">


    <div class="col-sm" style="flex:0 0 300px;">
      <div class="card el-element-overlay">
        <div class="card-body">

          <div class="el-card-item" style="padding-bottom: 0px;">
            <div class="el-card-avatar el-overlay-1">
              <img id="image_preview" src="{{ form.thumb.data }}">
            </div>
          </div>

          <div class="btn btn-lg m-b-20 btn-danger btn-block waves-effect waves-light btn-file">
            <i class="fa fa-paperclip"></i> 修改{{ form.thumb.label.text }}
            <input id="upload" name="upload" type="file">
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm">
      <div class="card">
        <!-- /.box-header -->
        <div class="card-body">
          {{ form.csrf_token }}
          <input id="thumb" name="thumb" type="hidden">
          <div style="display: none">
            {{ form_field(form.cid, class_='form-control')}}
          </div>



          {{ form_field(form.title, class_='form-control')}}

          <h4><i class="fa fa-paperclip m-r-10 m-b-10"></i> 附件</h4>
          <div class="row" style="margin-bottom: 20px;">
            {% for item in model.attachments %}
            <div class="col-md-2">
              <a href="#">
                <img class="img-thumbnail" alt="attachment" style="height: 200px;"
                  src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/{{ item.url }}"> </a>
            </div>
            {% endfor %}
          </div>

          <div class="form-group" style="position: relative">
            {{ form.edit_content.label }}  (<a href="#" data-toggle="modal" data-target="#exampleModal"> 查看原文章</a>)
            {{ form.edit_content(class_='form-control') }}
            {% for message in form.edit_content.errors %}
            <p class="text-danger">{{ message }}</p>
            {% endfor %}
          </div>


          <!-- Button trigger modal -->

          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">原文</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  {{ model.content|safe }}
                </div>
              </div>
            </div>
          </div>

          {{ form.submit(class_='btn btn-primary') }}
          <a class="btn btn-danger" data-id="{{ model.id }}" href="javascript:void(0)" onclick="submit_audit(event)" style="color: white">提交审核</a>
        </div>
      </div>
    </div>

  </div>
</form>

{{ ckeditor.load() }}
{{ ckeditor.config(name='edit_content') }}

{% endblock %}


{% block scripts %}
{{ super() }}
<script type="text/javascript">
  $(function () {
    $('#upload').bind('change', function () {
      let formData = new FormData()
      formData.append('csrf_token', '{{ csrf_token() }}')
      formData.append('upload', $(this)[0].files[0])
      $.post({
        url: "{{ url_for('.upload_image') }}",
        data: formData,
        contentType: false,
        processData: false,
        success: function (result) {
          if (result.uploaded) {
            $('#image_preview').attr('src', result.url)
            $('#thumb').attr("value", result.url)
          }
        }
      })
    })
  })

  function submit_audit(e) {
    swal({
      title: "您确定?",
      text: "您确定要提交这文章吗! 提交后审核成功后就不能编辑了",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "是的, 我确定!",
      cancelButtonText: "取消操作",
      closeOnConfirm: false
    }, function () {
      let id = e.srcElement.dataset['id']
      window.location.href = '/article/audit_status/' + id + '/8'
    })
  }

</script>
{% endblock scripts %}